<template>
  <button class="x-button" :class="buttonClass" @click="handleClick">
    <slot></slot>
  </button>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';

const props = defineProps({
  type: {
    type: String,
    default: 'primary'
  },
  size: {
    type: String,
    default: 'medium'
  }
})

const buttonMap: Record<string, string> = {
  primary: 'primary',
  danger: 'danger',
  sub: 'sub',
  success: 'success',
  warning: 'warning',
  info: 'info',
}

const sizeMap: Record<string, string> = {
  small: '12px',
  medium: '14px',
  large: '16px',
}

const buttonClass = computed(() => `x-button--${buttonMap[props.type]}`)

const emit = defineEmits(['click'])

const handleClick = () => {
  emit('click')
}


</script>

<style scoped lang="scss">

</style>
